<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    
    <!-- <script src="https://cdn.jsdelivr.net/gh/jquery-form/form@4.2.2/dist/jquery.form.min.js" integrity="sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK+frTVqZeNDFl8woCbF0CYG6g2fMEFFo/i" crossorigin="anonymous"></script> -->
    <script type="text/javascript" src="../js/zepto.js"></script>
	<script src= "../js/jquery.min.js"></script>
	<script src="../js/touch.min.js"></script>
    <script src="../js/layer/layer.js"></script>
<script type="text/javascript">
		document.addEventListener('plusready', function () {
			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"	
		});
	</script>
    <style>
        *{
        margin: 0rem;
        padding: 0rem;
        text-decoration: none;
        list-style: none;
        
    }
    html{
        
        font-size: calc(100vw / 7.5);
    }
html,body{
	background-color: #fff !important;
	width: 100%;
	height: 100%;
	 /*font-size:  100rem;*/
	 /*font-size: 100px;*/
	 font-family: "Microsoft YaHei" ! important;
}
        .wrapper .header{
        box-sizing: border-box;
        padding: 0rem 0.1rem;
        display: flex;
        width: 100% ;
        height: 0.88rem;
        background: #809fba;
    }	
    .wrapper .header div{
        height: 100%;
        font-size: 0.30rem;
        text-align: center;
        line-height: 0.88rem;
        color: #fff;
    }
    .con{
        flex: 8;
    }
    .arrow img{
        width: 0.41rem;
        height: 0.3rem;
        display: inline-block;
    }
    .dot img{
        width: 0.41rem;
        height: 0.09rem;
        display: inline-block;
        margin-bottom: 0.03rem;
    }
    .arrow{
        flex: 1;
        /* background: url("../img/arrow.png") no-repeat center; */
        background-size: contain;
    }
    .dot{
        flex: 1;
    }
    /* 内容 */
    .wrapper-content{
        width: 100%;
    }
    .wrapper-content form {
        box-sizing: border-box;
        padding-left: 0.3rem;
        width: 100%;
    }
   
    .wrapper-content form .sub{
        width: 6.24rem;
        height: 0.94rem;
        position: absolute;
        bottom: 0.98rem;
        left: 0.65rem;
        background: #7f9eba;
        color: #fff;
        border: 0px;
        font-size: 0.32rem;
    }
    .wrapper-content form .title{
        height: 1.02rem;
        line-height: 1.02rem;
        font-size: 0.3rem;
        color: #2b4961;

    }
    .wrapper-content form .wrapper-photo{
        position: relative;
        width: 7.13rem;
        height: 2.08rem;
       
        margin-left: -0.16rem;
    }
    .wrapper-content form .wrapper-photo input{
        position: absolute;
        display: inline-block;
        width: 3rem;
        height: 2rem;
        z-index: 10;
        opacity: 0;
    }
    .wrapper-content form .wrapper-photo .left{
        position: absolute;
        left: 0rem;
        width: 3.43rem;
        height: 2.08rem;
        border: 1px dashed #9bb1c2;
        border-radius: 0.1rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center; 
    }

    .wrapper-content form .wrapper-photo .right{
        position: absolute;
        right: 0rem;
        width: 3.43rem;
        height: 2.08rem;
        border: 1px dashed #9bb1c2;
        border-radius: 0.1rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center; 
    }
    .wrapper-content form .wrapper-photo img{
        position: absolute;
        left: 1.27rem;
        top: 0.36rem;
        width: 0.85rem;
        height: 0.85rem;
    }
    .wrapper-content form .wrapper-photo p{
        position: absolute;
        bottom: 0rem;
        height: 0.86rem;
        width: 100%;
        line-height: 0.87rem;
        text-align: center;
        font-size: 0.24rem;
        color: #919aa4;
    }
   #name{
       opacity: 0;

   }
   #number{
       opacity: 0;
   }
    </style>
	
</head>

<body>
	<div class="wrapper">
		<div class="header">
			<div class="arrow">
				<img src="../img/arrow.png" alt="">
			</div>
			<div class="con">上传照片</div>
			<div class="dot">
				<img src="../img/dot.png" alt="">
			</div>
        </div>
    </div> 

    <div class="wrapper-content">
       <form action="" method="POST" enctype="multipart/form-data">
           <p class="title">上传身份证照片</p>
            <div class="wrapper-photo">
                <div class="left">
                   <input id="leftImage" class="fileImage" name="idFront" type="file"  accept="image/*"  size="30"/>
                    <img src="../img/camera.png" alt="">
                    <p>正面照片</p>
                </div>
                <div class="right">
                   <input id="rightImage" class="fileImage" name="idBack" type="file"  accept="image/*" size="30"/>
                    <img src="../img/camera.png" alt="">
                    <p>反面照片</p>
                </div>
            </div>
            <!-- <input type="file" id="leftImage"> -->
            <!-- <input type="file" id="rightImage"> -->
            <input type="text" id="name" name="realname"> <input type="text"  id="number" name="idnumber">
            <input type="button" class="sub" value="上传">
       </form>
    </div>
    
  
	

	<!-- <script src= "../js/jquery.cookie.js"></script> -->
    <script src="../js/personal.js"></script>
    <script>
        //判断是否是安卓系统
        // var u = navigator.userAgent;
        // var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 
        //android终端
        // var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 
        //ios终端
        // alert('是否是Android：'+isAndroid);
        // alert('是否是iOS：'+isiOS);
        // if(isAndroid){
            // $(".fileImage").attr("capture","camera")
        // }


    	var leftflag = false;
        var rightflag = false;
        var formData = new FormData();
        $("#name").val(localStorage.realname)

        $("#number").val(localStorage.idnumber)
         $(".arrow").on("tap",function(){
         
			window.location.href = "./shimingrenzheng.html";
		})
      
       $(".sub").on("tap",function(){
           console.log(13)
           if(leftflag && rightflag){
           	$.ajax({
                type:"POST",
                url:`${localStorage.top}api/UserCenter/real_auth`,
                data:{
                    "TOKEN":`${localStorage.token}`,
                    "IDFront": `${localStorage.IDFront}`,
                    "IDBack": `${localStorage.IDBack}`,
                    "realname":`${localStorage.realname}`,
                    "idnumber": `${localStorage.idnumber}`
                },
                success: function(data){
                    if(data.code == localStorage.erro){
                        layer.msg(data.msg)
                    }else{
                        layer.msg(data.msg)
                        setTimeout(function(){
                            window.location.href = "gerenziliao.html"
                        },1500)
                    }
                }
    
            })
           }else if(leftflag || rightflag){
           	layer.msg("图片正在上传请稍后")
           }else{
               layer.msg("请上传完整的正反面照片")
           }
            
       
              
       })
    $("#leftImage").change(function(){
            var file1 = document.getElementById("leftImage").files[0];
            // formData.append("realname",`${localStorage.realname}`);
            // formData.append("idnumber",`${localStorage.idnumber}`);
            formData.append("TOKEN",`${localStorage.token}`);
            formData.append("file",file1);
            // formData.append("IDBack",file2);
            $.ajax({
                    type:"POST",
                    url: `${localStorage.top}api/common/upload`,
                    contentType : false,
                    processData : false, 
                    // mimeType:"application/x-www-form-urlencoded",
                    dataType: "json",
                    data: formData,
                    success: function(data){
                    	if(data.code == localStorage.success){
                    		leftflag = true;
                    		 console.log(data);
                     	   $(".left").css("backgroundImage","url('"+data.data.url+"')");
                            $(".left img").css("opacity","0")
                            $(".left p").css("opacity","0")
                            
                       	   localStorage.IDFront = data.data.url
                    	}
                       
                    }
                })
    })

    $("#rightImage").change(function(){
            var file2 = document.getElementById("rightImage").files[0];
            // formData.append("realname",`${localStorage.realname}`);
            // formData.append("idnumber",`${localStorage.idnumber}`);
            formData.append("TOKEN",`${localStorage.token}`);
            // formData.append("file",file1);
            formData.append("file",file2);
            $.ajax({
                    type:"POST",
                    url: `${localStorage.top}api/common/upload`,
                    contentType : false,
                    processData : false, 
                    // mimeType:"application/x-www-form-urlencoded",
                    dataType: "json",
                    data: formData,
                    success: function(data){
                    	if(data.code == localStorage.success){
                    		rightflag = true;
                    		   console.log(data);
                        $(".right").css("backgroundImage","url('"+data.data.url+"')");
                        $(".right img").css("opacity","0")
                        $(".right p").css("opacity","0")
                        localStorage.IDBack = data.data.url
                    	}
                     
                    }
                })
    })
    


    //-----------------------------
//  function picUp(){
//      var token = '152591432056900';
//      // var pic = document.getElementById("picu").files[0];
//      var file = document.getElementById("picu").files[0];
//      var formData = new FormData();
//      formData.append("pic",file);
//      formData.append("token",token);
//      $.ajax({ 
//          url : 'http://hztx.com/home/Base/uploadPic', 
//          type : 'POST', 
//          data : formData, 
//          // 告诉jQuery不要去处理发送的数据
//          processData : false, 
//          // 告诉jQuery不要去设置Content-Type请求头
//          contentType : false,
//          dataType: "json",
//          success: function(data) {
//              console.log(data);
//          }
//      });
//  }


    //----------------------------

    //    var form = $("form")
    //    $("form").attr("action",`${localStorage.top}api/UserCenter/realAuthUpload?TOKEN=${localStorage.token}`)

    //     $("#leftImage").change(function(){
    //         // console.log($(this).files)
    //         let files = $(this)[0].files[0]
    //         // console.log(files)
    //         var imgsrc = window.URL.createObjectURL(files)
    //         if(imgsrc){
    //             $(".left").css("backgroundImage","url('"+imgsrc+"')")
    //             $(".left").find("p").css("display","none").end().find("img").css("display","none")
    //         }
    //         formData.append("IDFront",files)
    //     })

    //       $("#rightImage").change(function(){
    //         let files = $(this)[0].files[0]
    //         // console.log(files.result)
    //         var imgsrc = window.URL.createObjectURL(files)
    //         if(imgsrc){
    //             $(".right").css("backgroundImage","url('"+imgsrc+"')")
    //             $(".right").find("p").css("display","none").end().find("img").css("display","none")
    //         }
    //        formData.append("IDBack",files)
    //     //    console.log(files)
    //     })
      
    //     function successed(data){
    //         console.log(data)
    //     }

        //ajax提交表单

    //   $(".sub").on("click",function(){
    //         $('#registSubmit').on('submit', function(){
    //             registPost()
    //             event.preventDefault() //阻止form表单默认提交
    //         })
    //         registPost();
    //   })

 
    </script>
</body>

</html>